import style from 'styled-components'

export const HeaderWrapper = style.div`
    background-color: #242424;
    height: 75px;
    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        line-height: 70px;
        h1 {
            display: inline-block;
            width: 176px;
            height: 100%;
            background-position:  0 -6px;
            font-size: 0;    
            a {
                display: inline-block;
                width: 176px;
                height: 100%;
            }
        }

        .content-right {
            .ant-input-affix-wrapper {
                width: 170px;
                border-radius: 14px;
                margin-right: 30px;
            }
            input {
                width: 170px;
                font-size: 10px;
            }
            button {
                border-radius: 14px;
                padding: 0 12px;
                background: rgba(0,0,0,0)
                span {
                    color: #ccc;
                    font-size: 10px;
                    &.anticon-search {
                        font-size: 14px;
                        color: #999
                    }
                }
            }
            
        }
    }
    .line {
        background-color: #c20c0c;
        height: 5px
    }
    .list-item {
        position: relative;
        display: inline-block;
        height: 100%;
        font-size: 16px;
        color: #f0f0f0;
        padding: 0 16px;
        &:hover {
            background-color: #000;
            text-decoration: none;
        }
        &.active {
            &::after {
                content: '';
                width: 20px;
                height: 20px;
                display: inline-block;
                position: absolute;
                bottom: -17px;
                left: 50%;
                transform: translate(-50%,0);
                background: url(${require('@/assets/img/sprite_01.png')}) -220px 0px

            }
        }
    }

`